.news {
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;

  .news-content {
    flex: 1;
    height: 0;
    overflow: auto;

    .news-list {
      .news-item {
        margin: 6px 0;
        display: flex;
        align-items: center;

        &:hover {
          .news-text {
            color: var(--primary-color-hover);
          }
        }

        .news-text {
          flex: 1;
          text-align: left;
          margin-left: 10px;

          .tip {
            display: inline-block;
            padding: 0px 4px;
            line-height: 16px;
            font-size: 12px;
            border-radius: 4px;
            background-color: var(--primary-color);
            color: var(--font-color-light);
            margin-left: 4px;
          }

          .tip.error {
            background-color: var(--error-color);
          }

          .tip.warn {
            background-color: var(--warn-color);
          }
        }

        .img {
          width: 80px;
          height: 50px;
          border-radius: 6px;
          background-color: var(--card-background-color);
        }
      }
    }
  }
}